<template>

  <div class="main-content" style="width: 60%">
    <div class="card" style="padding: 20px">
      <div  style="margin-bottom: 5px">
        <el-input v-model="data.seatNo" prefix-icon="Search" style="width: 240px;margin-right: 10px" placeholder="请输入座位编号查询"></el-input>
        <el-button type="primary" plain @click="load">查询</el-button>
        <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
      </div>

      <div  style="margin-bottom: 5px">
        <el-table stripe :data="data.tableData" >
          <el-table-column  prop="roomName" label="阅览室名称"/>
          <el-table-column  prop="seatNo" label="座位编号"/>
          <el-table-column  prop="userName" label="预约人"/>
          <el-table-column  prop="time" label="预约时间"/>
          <el-table-column  prop="status" label="预约状态">
            <template #default="scoped">
              <el-tag type="success" v-if="scoped.row.status==='已选'">已选</el-tag>
              <el-tag type="danger" v-if="scoped.row.status==='已退'">已退</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template v-slot="scope">
              <el-button type="primary"  @click="changeStatus(scope.row)">退座</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="data.total">
        <el-pagination  @current-change="load" layout="prev,pager,next" background :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
      </div>
    </div>
  </div>


</template>
<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";


  const data=reactive({
    formVisible:false,
    form:{},
    tableData:[],
    pageNum:1,
    pageSize:5,
    total:0,
    seatNo:null,
    ids:[],
  })

const changeStatus = (row) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗','删除确认',{type:'warning'}).then(res=>{
    row.status='已退'
    request.put('/seatReserve/update', row).then(res=>{
      if(res.code === '200'){
        ElMessage.success('退座成功');
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }).catch()

}


  const handleAdd = () =>{
    data.form={}
    data.formVisible=true
  }
  const add = () =>{
    request.post('/seatReserve/add',data.form).then(res=>{
      if(res.code === '200'){
        ElMessage.success("操作成功")
        data.formVisible=false
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }
  const handleEdit = (row) =>{
    data.form=JSON.parse(JSON.stringify(row))
    data.formVisible=true
  }


  const load = () =>{
    request.get('/seatReserve/selectPage',{
      params:{
        pageNum:data.pageNum,
        pageSize:data.pageSize,
        seatNo:data.seatNo
      }
    }).then(res=>{
      if(res.code === "200"){
        data.tableData=res.data?.list || []
        data.total=res.data?.total
      }
    })
  }

  const update = () => {
    request.put('/seatReserve/update', data.form).then(res=>{
      if(res.code === '200'){
        ElMessage.success('操作成功');
        data.formVisible=false
        load()
      }
    })
  }

  const del = (id) =>{
    ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗','删除确认',{type:'warning'}).then(res=>{
      request.delete('/seatReserve/delete/'+id).then(res=>{
       if (res.code === '200'){
         ElMessage.success("删除成功")
         load()
       }else {
         ElMessage.error(res.msg)
       }
      })
    }).catch(err=>{
      console.error(err)
    })
  }
  
  const delBatch = () => {
    if (!data.ids.length){
      ElMessage.error("请选择数据")
      return
    }
    ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗','删除确认',{type:'warning'}).then(res=>{
      request.delete('/seatReserve/delete/batch',{data:data.ids}).then(res=>{
        if (res.code === '200'){
          ElMessage.success("删除成功")
          load()
        }
        else {
          ElMessage.error(res.msg)
        }
      })
    }).catch(err=>{
      console.error(err)
    })
  }

  const handleSelectionChange = (rows) => {
    data.ids=rows.map(v=>v.id)
  }



  const save =()=>{
    data.form.id?update():add()
  }

  const reset = () =>{
    data.seatNo=null
    load()
  }
  load()
</script>